<!--
 * hi-tag - 标签
 *
 * @author 济南晨霜信息技术有限公司
 * @mobile 18560000860 / 18754137913
 -->
<template>
    <view class="hi-tag" :class="_classes" :style="_styles" :hover-class="hover" @tap="_emits('click')">
        <hi-icon class="hi-tag__icon" :name="icon" v-if="icon"></hi-icon>
        <view class="hi-tag__text">{{ text }}</view>
        <view class="hi-tag__close" v-if="close" @tap.stop="_emits('close')" :hover-class="hover">
            <hi-icon class="hi-tag__close__icon" :name="closeIcon"></hi-icon>
        </view>
    </view>
</template>

<!-- 由于 HbuilderX 不支持 defineOptions() 写法，故只能在此处进行配置 -->
<script>
    export default { options: uni?.$hi?.config?.componentsOptions || {} };
</script>

<script setup>
    import { ref, computed } from "vue";
    import props from "./props.js";

    // 组件属性
    const _props = defineProps(props);

    // 事件
    const _emits = defineEmits(["close", "click"]);

    // 组件类名
    const _classes = computed(() => {
        const classes = [];

        // 主题
        if (_props.theme) classes.push(`hi-tag--theme hi-tag--theme-${_props.theme}`);

        // 镂空
        if (_props.plain) classes.push("hi-tag--plain");

        // 浅化背景
        if (_props.tint) classes.push("hi-tag--tint");

        // 边框
        if (_props.border) classes.push("hi-tag--border");

        // 关闭按钮 absolute
        if (_props.closeAbsolute) classes.push("hi-tag--close-absolute");

        return classes;
    });

    // 组件样式
    const _styles = computed(() => {
        const styles = [];

        // 主题
        if (_props.theme) styles.push(`--hi-tag-theme: var(--hi-theme-${_props.theme})`);

        // 浅化透明度
        if (_props.tintOpacity) styles.push(`--hi-tag-background-opacity: ${_props.tintOpacity}`);

        // 背景
        if (_props.bg) styles.push(`--hi-tag-background: ${_props.bg}`);

        // 颜色
        if (_props.color) styles.push(`--hi-tag-color: ${_props.color}`);

        // 文字大小
        if (_props.fontSize) styles.push(`--hi-tag-font-size: ${_props.fontSize}`);

        // 宽
        if (_props.width) styles.push(`--hi-tag-width: ${_props.width}`);

        // 高
        if (_props.height) styles.push(`--hi-tag-height: ${_props.height}`);

        // 边框样式
        if (_props.borderWidth) styles.push(`--hi-tag-border-width: ${_props.borderWidth}`);
        if (_props.borderStyle) styles.push(`--hi-tag-border-style: ${_props.borderStyle}`);
        if (_props.borderColor) styles.push(`--hi-tag-border-color: ${_props.borderColor}`);

        // 圆角大小
        if (_props.radius) styles.push(`--hi-tag-border-radius: ${_props.radius}`);

        return styles;
    });
</script>

<style lang="scss" scoped>
    .hi-tag {
        display: var(--hi-tag-display, inline-flex);
        align-items: var(--hi-tag-align-items, center);
        padding: var(--hi-tag-padding, 0 10px);
        gap: var(--hi-tag-gap, 5px);
        position: var(--hi-tag-position, relative);
        font-size: var(--hi-tag-font-size, 0.8em);
        border-radius: var(--hi-tag-border-radius, 3px);
        background: var(--hi-tag-background, var(--hi-background-default));
        color: var(--hi-tag-color, inherit);
        width: var(--hi-tag-width, auto);
        height: var(--hi-tag-height, 2em);
        border: var(--hi-tag-border-width, 0) var(--hi-tag-border-style, solid) var(--hi-tag-border-color, currentColor);

        &__icon {
            color: var(--hi-tag-icon-color, inherit);
            font-size: var(--hi-tag-icon-font-size, inherit);
        }

        &__close {
            position: var(--hi-tag-close-position, relative);
            top: var(--hi-tag-close-top, auto);
            right: var(--hi-tag-close-right, auto);
            bottom: var(--hi-tag-close-bottom, auto);
            left: var(--hi-tag-close-left, auto);
            width: var(--hi-tag-close-width, 2em);
            height: var(--hi-tag-close-height, 2em);
            background: var(--hi-tag-close-background, transparent);
            display: var(--hi-tag-close-display, flex);
            flex-direction: var(--hi-tag-close-flex-direction, column);
            align-items: var(--hi-tag-close-align-items, center);
            justify-content: var(--hi-tag-close-justify-content, center);
            border-radius: var(--hi-tag-close-border-radius, 50%);
            z-index: var(--hi-tag-close-z-index, 8);
            color: var(--hi-tag-close-color, inherit);
            font-size: var(--hi-tag-close-font-size, 0.6em);
            transform: var(--hi-tag-close-transform, none);
            border: var(--hi-tag-close-border-width, 1px) var(--hi-tag-close-border-style, solid) var(--hi-tag-close-border-color, currentColor);
        }

        &--close-absolute {
            .hi-tag__close {
                position: var(--hi-tag-close-position, absolute);
                top: var(--hi-tag-close-top, 0);
                right: var(--hi-tag-close-right, 0);
                transform: var(--hi-tag-close-transform, translate(50%, -50%));
                background: var(--hi-tag-close-background, var(--hi-theme-error, #ff0000));
                color: var(--hi-tag-close-color, #ffffff);
                border-width: var(--hi-tag-close-border-width, 0);
            }
        }

        // 主题
        &--theme {
            background: var(--hi-tag-background, var(--hi-tag-theme, var(--hi-background-default)));
            color: var(--hi-tag-color, #ffffff);
        }

        // 镂空
        &--plain {
            background: var(--hi-tag-background, transparent);
            color: var(--hi-tag-color, var(--hi-tag-theme, inherit));
            border-width: var(--hi-tag-border-width, 1px);
        }

        // 浅化
        &--tint {
            background: transparent;
            color: var(--hi-tag-color, var(--hi-tag-theme, inherit));

            &::before {
                content: "";
                position: absolute;
                width: 100%;
                height: 100%;
                left: 0;
                top: 0;
                z-index: 0;
                background: var(--hi-tag-background, var(--hi-tag-theme, var(--hi-background-default)));
                opacity: var(--hi-tag-background-opacity, 0.2);
                border-radius: inherit;
            }
        }

        // 边框
        &--border {
            border-width: var(--hi-tag-border-width, 1px);
        }
    }
</style>
